<template>
  <div class="topic">
    <ul class="topicData">
      <li v-for="e in topicData" :key="e.id">
        <img :src="e.scene_pic_url" alt="" />
        <h3>{{ e.title }}</h3>
        <div>{{ e.subtitle }}</div>
        <p>{{ e.price_info | RMB2 }}</p>
      </li>
    </ul>
    <van-pagination
      v-model="currentPage"
      :page-count="2"
      mode="multi"
      :show-page-size="0"
      @change="changeGetTopicData"
    />
  </div>
</template>

<script>
import { GetTopicData } from "@/request/api";
export default {
  data() {
    return {
      topicData: [],
      currentPage: null,
    };
  },
  created() {
    GetTopicData({ page: "1", size: "10" })
      .then((res) => {
        this.topicData = res.data.data;
        // this.currentPage = res.data.currentPage;
        this.currentPage = currentPage;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    changeGetTopicData() {
      GetTopicData({ page: this.currentPage, size: "10" })
        .then((res) => {
          this.topicData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.topic {
  padding-bottom: 0.6rem;
  .van-pagination {
    color: darkred;
  }
}
.topicData {
  li {
    background-color: #fff;
    line-height: 40px;
    text-align: center;
    margin-bottom: 20px;
    img {
      width: 100%;
      display: block;
    }
    div {
      font-size: 0.14rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    p {
      color: darkred;
      font-size: 0.14rem;
    }
  }
}
</style>